<template>
  <div class="songlist">
    <div class="top">
      <i class="iconfont icon-fanhui" @click.stop="$router.go(-1)"></i>
      <span>歌单广场</span>
    </div>
    <div class="tbs">
      <van-tabs v-model="active" animated>
        <van-tab title="推荐">
          <SongOfASingleSetOfPieces :Playlist="recommendThePlaylist"></SongOfASingleSetOfPieces>
        </van-tab>
      

        <van-tab title="精品">
          <SongOfASingleSetOfPieces :Playlist="goodsplaylists"></SongOfASingleSetOfPieces>
        </van-tab>

        <van-tab title="华语">
          <SongOfASingleSetOfPieces :Playlist="chineseplist"></SongOfASingleSetOfPieces>
        </van-tab>
        <van-tab title="流行">
          <SongOfASingleSetOfPieces :Playlist="popular"></SongOfASingleSetOfPieces>
        </van-tab>
        <van-tab title="民谣">
          <SongOfASingleSetOfPieces :Playlist="folk"></SongOfASingleSetOfPieces>
        </van-tab>
        <van-tab title="电子">
          <SongOfASingleSetOfPieces :Playlist="electronic"></SongOfASingleSetOfPieces>
        </van-tab>
        <van-tab title="轻音乐">
          <SongOfASingleSetOfPieces :Playlist="lightMusic"></SongOfASingleSetOfPieces>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { getqualityGoodsPlaylists, gethotPlaylists } from "@/api/songitem";

import SongOfASingleSetOfPieces from "@/components/SongOfASingleSetOfPieces.vue";

export default {
  components: { SongOfASingleSetOfPieces },
  data() {
    return {
      active: 0,
      recommendThePlaylist: [],
      goodsplaylists: [],
      theOfficial:[],
      popular: [],
      folk: [],
      chineseplist: [],
      electronic: [],
      lightMusic: [],
    };
  },

  methods: {
    //获取精品歌单
    getqualityGoodsPlaylistsFun() {
      getqualityGoodsPlaylists().then((data) => {
        this.goodsplaylists = data.playlists;
      });
    },
      getrecommendThePlaylist() {
        gethotPlaylists("经典").then((data) => {
          this.recommendThePlaylist = data.playlists;
        });
      },

    // gettheOfficial() {
    //   gethotPlaylists("经典").then((data) => {
    //     this.theOfficial = data.playlists;
    //   });
    // },

    getpopular() {
      gethotPlaylists("流行").then((data) => {
        this.popular = data.playlists;
      });
    },

    // 民谣
    getfolk() {
      gethotPlaylists("民谣").then((data) => {
        this.folk = data.playlists;
      });
    },
    getchineseplist() {
      gethotPlaylists("华语").then((data) => {
        this.chineseplist = data.playlists;
      });
    },
    getelectronic() {
      gethotPlaylists("电子").then((data) => {
        this.electronic = data.playlists;
      });
    },
    getlightMusic() {
      gethotPlaylists("轻音乐").then((data) => {
        this.lightMusic = data.playlists;
      });
    },
  },
  created() {
    this.getqualityGoodsPlaylistsFun();
    this.getrecommendThePlaylist();
    // this.gettheOfficial()
    this.getpopular();
    this.getfolk();
    this.getchineseplist();
    this.getelectronic();
    this.getlightMusic();
  },
};
</script>

<style lang="scss" scoped>

.songlist {
  width: 100%;
  height: 100%;
  position: relative;
  .top {
    height: 20px;
    display: flex;
    // line-height: 20px;
    align-items: center;

    i {
      font-size: 18px;
     margin-top: 10px;
     padding: 0 10px;
      font-weight: bold;
    }
    span {
      font-size: 14px;
      font-weight: bold;
      margin-top: 10px;
    }
  }
}
</style>